<template>
	<view class="content">
		<view class="header">
			<view class="search_card">
				<view class="left_s">
					<uni-easyinput prefixIcon="search" @keydown.enter="getGoodsClassifyList"
						placeholderStyle="font-size:28rpx;" @clear="getGoodsClassifyList" v-model="value"
						:inputBorder="false" placeholder="输入商品分类搜索">
					</uni-easyinput>
					<view class="search_btn" @click="getGoodsClassifyList">
						搜索
					</view>
				</view>
				<view class="my_goods" @click="selectMyGoods">
					<span class="red_num" v-if="seleMygoodsList.length>0">{{seleMygoodsList.length}}</span>
					<image src="/static/home/goods_blue.svg" class="img_msg" mode="aspectFit"></image><span
						class="text_my">我的商品</span>
				</view>
			</view>
		</view>
		<view class="bodyer">
			<!-- 品牌 -->
			<div class="bodyer-left">
				<view v-for="(item,index) in brandList" :key="index"
					:class="store.state.checkBrandItem.id == item.id?'left-item-check':''" class="left-item"
					@click="changeBrand(item)">
					<view class="name_title">{{item.name}}</view>
					<span class="red_num" v-if="getBrandNum(item.id)">{{getBrandNum(item.id)}}</span>
				</view>
			</div>
			<!-- 分类 -->
			<div class="goodsList">
				<view class="classify" v-for="(item,index) in classifyList"
					:class="store.state.checkClassifyItem.id==item.id?'check-classify':''" :key="index"
					@click="changeClassify(item)">
					{{item.name}}<span class="red_num" v-if="getClassifyNum(item.id)">{{getClassifyNum(item.id)}}</span>
				</view>
			</div>
			<!-- 提交按钮 -->
			<view class="activeBtn" v-if="store.state.orderGoodsTypes.length>0">
				<view class="btn_Confirm">
					<view class="show_Confirm">
						已选择&nbsp;<span
							style="color:#007cff;font-weight: bold;">{{store.getters.getTotalNum}}</span>&nbsp;个产品
						<view class="details" @click="lookDetail()">
							明细<uni-icons type="top" color="#007cff"></uni-icons>
						</view>
					</view>
					<view class="btn" @click="btnSubmit">
						<view class="text">
							确认提交
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 我的商品弹窗 -->
		<uni-popup ref="popupMyGoodsRef" type="bottom" background-color="#eee">
			<view class="goodspopup">
				<view class="text_top_popup">
					我的商品<uni-icons class="icon" color="#333" @click="popupMyGoodsRef.close()" size="21"
						type="closeempty"></uni-icons>
				</view>
				<view class="goods_list">
					<view class="goods_item_bo" v-if="myGoodsList.length>0" v-for="(item,index) in myGoodsList"
						:key="index">
						<view class="over_Insured">
							<span class="tag" v-if="!item.overInsured">在保</span>
							<span class="tag tag_p" v-else>已过保</span>
						</view>
						<view class="goods_item_info">
							<view class="goods_item_left">
								<view class="item_img">
									<image :src="item.image" v-if="item.image" class="_img" mode="aspectFill">
									</image>
									<uni-icons color="#aac" size="48" v-else type="image"></uni-icons>
								</view>
								<view class="item_title">
									<view class="item_title_brand">
										{{item.goodsName}}
									</view>
									<view class="item_title_text">
										<span>编号：</span><span class="item_title_color">{{item.code}}</span>
									</view>
									<view class="item_title_text">
										<span>型号：</span><span class="item_title_color">{{item.goodsModel}}</span>
									</view>
									<view class="item_title_text">
										<span>规格：</span><span class="item_title_color">{{item.goodsSpecName}}</span>
									</view>
									<view class="item_title_text">
										<span>SN码/一物一码：</span><span class="item_title_color">{{item.code}}</span>
									</view>

								</view>
							</view>
							<uni-icons type="plus-filled" size="26" v-if="!seleMygoodsList.includes(item.id)"
								color="#007cff" @click="addMyGoods(item)"></uni-icons>
							<uni-icons type="minus-filled" size="26" v-else color="#FF5733"
								@click="deleteMyGoods(item)"></uni-icons>
						</view>
					</view>
					<view v-else class="void_goods">
						<image class="img" src="/static/goods.svg"></image>
						<view class="tip">暂无商品</view>
					</view>
				</view>

			</view>
		</uni-popup>
		<!-- 明细弹窗 -->
		<uni-popup ref="popupMyGoodsDetailRef" type="bottom" background-color="#eee">
			<view class="goodspopup">
				<view class="text_top_popup">
					已选择商品<uni-icons class="icon" color="#333" @click="popupMyGoodsDetailRef.close()" size="21"
						type="closeempty"></uni-icons>
				</view>
				<view class="">
					<view class="goods_list">
						<view class="goods_item" v-if="store.getters.getTotalList.length>0"
							v-for="(item,index) in store.getters.getTotalList" :key="index">
							<view class="goods_item_left">
								<view class="item_img">
									<image :src="item.image" v-if="item.image" class="_img" mode="aspectFill">
									</image>
									<uni-icons color="#aac" size="48" v-else type="image"></uni-icons>
									<!-- <image src="/static/goods.svg" v-else mode="aspectFill" class="item_img"></image> -->
								</view>
								<view class="item_title">
									<view class="item_title_brand">
										{{item.name}}
									</view>
									<view class="item_title_text">
										<span>编号：</span><span class="item_title_color">{{item.code}}</span>
									</view>
									<view class="item_title_text">
										<span>型号：</span><span class="item_title_color">{{item.model}}</span>
									</view>
									<view class="item_title_text">
										<span>规格：</span><span class="item_title_color">{{item.specName}}</span>
									</view>
									<view class="item_title_code" v-if="item.code">
										<span>SN码/一物一码：</span><span class="item_title_color">{{item.code}}</span>
									</view>
								</view>
							</view>
							<uni-icons type="minus-filled" size="26" @click="deleteGoodsDetail(item)"
								color="#FF5733"></uni-icons>
						</view>
						<view v-else class="void_goods">
							<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
							<view class="tip">暂无商品</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import apiGoods from '@/util/api/goods.js'
	import { onLoad, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
	import store from '@/store/index.js'
	// 通过onLoad接收数据
	onLoad(() => {
		getGoodsBrandList()
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 刷新
	onPullDownRefresh(async () => {
		await getGoodsBrandList()
		uni.stopPullDownRefresh()
	})
	const brandList = ref([])//品牌列表
	const classifyList = ref([])//分类列表
	const myGoodsList = ref([])//我的商品列表

	const value = ref('')//分类搜索
	const popupMyGoodsRef = ref()//我的商品弹窗
	const popupMyGoodsDetailRef = ref()//商品明细
	// 获取品牌列表
	const getGoodsBrandList = async () => {
		let data = {
			"limit": 0,
			"name": "",
			"page": 0,
		}
		uni.showLoading({
			title: "加载中..."
		})
		await apiGoods.getBrandList(data).then(res => {
			if (res.code == 20000) {
				brandList.value = res.data.rows
				store.commit('setcheckBrandItem', res.data.rows[0])
				getGoodsClassifyList()
			}
		})
		uni.hideLoading()
	}
	// 预览图片
	const lookImg = (url) => {
		uni.previewImage({
			urls: [url],
		})
	}
	// 获取分类列表
	const getGoodsClassifyList = async () => {
		let data = {
			"limit": 0,
			"name": value.value,
			"page": 0,
		}
		uni.showLoading({
			title: "加载中..."
		})
		await apiGoods.getGoodstypeList(data, store.state.checkBrandItem.id).then(res => {
			if (res.code == 20000) {
				classifyList.value = res.data.rows
			}
		})
		uni.hideLoading()
	}
	// 查看商品明细
	const lookDetail = () => {
		popupMyGoodsDetailRef.value.open()
	}
	// 删除明细列表的商品
	const deleteGoodsDetail = (item) => {
		deleteGoods(item)
	}
	// 删除商品
	const deleteGoods = (item) => {
		store.commit('deleteGoods', item)
		if (item.typeGoods == 1) {
			getselectMyGoodsList(store.state.orderGoodsTypes)
		}
	}
	// 选择品牌
	const changeBrand = (val : { id : any; }) => {
		store.commit('setcheckBrandItem', val)
		store.commit('setcheckClassifyItem', {})
		getGoodsClassifyList()
	}
	// 获取对应品牌所选分类数量
	const getBrandNum = (id) => {
		for (const o of store.state.orderGoodsTypes) {
			if (o.brandId == id) {
				return o.checkClassifyList.length
			}
		}
	}
	// 选择分类
	const changeClassify = (val) => {
		store.commit('setcheckClassifyItem', val)
		uni.navigateTo({
			url: '/pages_user/home/way/ordergoods'
		})
	}
	// 获取对应分类所选商品数量
	const getClassifyNum = (id) => {
		for (const o of store.state.orderGoodsTypes) {
			if (o.brandId == store.state.checkBrandItem.id) {
				for (let s of o.checkClassifyList) {
					if (s.classifyId == id) {
						return s.orderGoodsVos.length
					}
				}
			}
		}
	}
	// 弹窗我的商品 客户已登记商品
	const selectMyGoods = async () => {
		let data = {
			"limit": 0,
			"page": 0
		}
		uni.showLoading({
			title: "加载中..."
		})
		await apiGoods.getUserOrderGoodsList(data).then(res => {
			if (res.code == 20000) {
				myGoodsList.value = res.data.rows
			}
		})
		uni.hideLoading()
		getselectMyGoodsList(store.state.orderGoodsTypes)
		popupMyGoodsRef.value.open()
	}
	//显示已选择 我的商品 客户已登记商品 id列表
	const seleMygoodsList = ref([])
	const getselectMyGoodsList = (arry) => {
		seleMygoodsList.value = []
		arry.filter(o => {
			if (o.type == 1) {
				o.orderGoodsVos.filter(i => {
					seleMygoodsList.value.push(i.codeIds[0])
				})
			}
		})
	}
	// 我的商品添加 客户已登记商品
	const addMyGoods = (item) => {
		let tmp = {
			buyMarket: '',
			"buyTime": item.warrantyStartTime,
			"codeIds": [item.id],
			"endTime": "",
			"goodsId": item.goodsId,
			"goodsSpecId": item.goodsSpecId,
			"id": null,
			"qty": 1,
			name: item.goodsName,
			specName: item.goodsSpecName,
			code: item.code,
			brandId: item.brandId,
			brand: item.goodsBrand,
			typeId: '',
			type: item.goodsType,
			model: item.goodsModel,
			image: '',
			typeGoods: 1//1-客户已登记商品，2-未登记商品，3-商品信息
		}
		let orderGoodsTypes = store.state.orderGoodsTypes
		if (store.state.orderGoodsTypes.length == 0) {
			orderGoodsTypes.push({ type: 1, orderGoodsVos: [tmp] })
		} else {
			//品牌 依次判断每个元素，如果存在某个元素符合条件，则返回true；没有元素符合条件则返回false。
			const result = store.state.orderGoodsTypes.some(o => o.type == 1)
			if (result) {
				orderGoodsTypes = store.state.orderGoodsTypes.map(o => {
					if (o.type == 1) {
						o.orderGoodsVos.push(tmp)
					}
					return o
				})
			} else {
				orderGoodsTypes.push({ type: 1, orderGoodsVos: [tmp] })
			}
		}
		getselectMyGoodsList(orderGoodsTypes)
		store.commit('setorderGoodsTypes', orderGoodsTypes)
	}
	// 删除 客户已登记商品
	const deleteMyGoods = (item) => {
		let orderGoodsTypes = store.state.orderGoodsTypes.filter(o => {
			if (o.type == 1) {
				o.orderGoodsVos = o.orderGoodsVos.filter(k => {
					if (k.codeIds[0] != item.id) {
						return k
					}
				})
				// 如果客户已登记商品为空，则删除该客户已登记商品不返回
				if (o.orderGoodsVos.length == 0) {
					return !o
				}
			}
			return o
		})
		getselectMyGoodsList(orderGoodsTypes)
		store.commit('setorderGoodsTypes', orderGoodsTypes)
	}
	// 确认提交
	const btnSubmit = () => {
		var pages = getCurrentPages();
		var pageIndex = pages.slice().reverse().findIndex(o => o.route == 'pages_user/home/add');
		if (pageIndex == -1) {
			uni.navigateTo({
				url: '/pages_user/home/add'
			})
		} else {
			uni.navigateBack({ delta: pageIndex })
		}

	}
</script>

<style lang="scss">
	.content {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;

		.header {
			padding: 10rpx 0;
			background-color: #f5f7fa;
			position: relative;
			z-index: 99;
			width: 100%;

			.search_card {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 24rpx;

				.left_s {
					display: flex;
					align-items: center;
					background-color: #fff;
					border-radius: 40rpx;
					height: 80rpx;
					width: 100%;

					:deep(.uni-easyinput__content) {
						height: 80rpx;
						border-radius: 40rpx 0 0 40rpx;

						&.is-focused {

							.uniui-clear,
							.uniui-eye-filled {
								color: #007cff99 !important;
							}
						}
					}

					.search_btn {
						font-size: 28rpx;
						border-left: 2rpx solid #007cff;
						color: #000;
						line-height: 40rpx;
						padding: 0 20rpx;
						height: 40rpx;
						color: #007cff;
						border-radius: 0 40rpx 40rpx 0;

					}
				}

				.my_goods {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					flex-wrap: nowrap;
					position: relative;

					.text_my {
						white-space: nowrap;
						color: #007cff;
					}

					.img_msg {
						width: 35rpx;
						height: 35rpx;
						margin-left: 10rpx;
						margin-right: 4rpx;
						border-radius: 50%;
					}

					.red_num {
						background-color: #FF5733;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						position: absolute;
						top: -30rpx;
						right: -20rpx;
						text-align: center;
						border-radius: 50%;
						color: #fff;
						font-size: 22rpx;
						transform: scale(.8);
					}
				}
			}
		}

		.bodyer {
			width: 100%;
			flex: 1;
			height: 100%;

			.bodyer-left {
				width: 30%;
				overflow-y: auto;
				height: 100%;
				float: left;
				background: #f9f9f9;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}

				.left-item {
					width: 100%;
					// height: 15vw;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 24rpx 24rpx 24rpx 2rpx;
					box-sizing: border-box;
					position: relative;

					.name_title {
						color: #666;
						font-size: 28rpx;
						width: 100%;
						height: 100%;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						overflow: hidden;
						word-wrap: break-word;
						word-break: break-all;
						text-align: center;
						border-left: 6rpx solid transparent;

					}

					.red_num {
						background-color: #FF5733;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						position: absolute;
						top: 2rpx;
						right: 2rpx;
						text-align: center;
						border-radius: 50%;
						color: #fff;
						font-size: 22rpx;
						transform: scale(.8);
					}

					&:last-child {
						margin-bottom: 300rpx;
					}
				}

				.left-item-check {
					background-color: #fff;

					.name_title {
						border-left: 6rpx solid #007cff;
						color: #007cff;
					}
				}
			}

			.goodsList {
				width: 70%;
				background-color: #fff;
				overflow-y: auto;
				background-color: whtie;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-bottom: 10%;
				height: 100%;
				float: left;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}

				.classify {
					margin-top: 5vw;
					width: 80%;
					background-color: #F5F7FA;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 20rpx;
					border-radius: 4rpx;
					font-size: 28rpx;
					color: #999;
					position: relative;

					&:last-child {
						margin-bottom: 300rpx;
					}

					.red_num {
						background-color: #FF5733;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						position: absolute;
						top: 2rpx;
						right: 2rpx;
						text-align: center;
						border-radius: 50%;
						color: #fff;
						font-size: 22rpx;
						transform: scale(.8);
					}
				}

				.check-classify {
					background-color: rgba(204, 232, 254, 0.2);
					color: #007cff;
				}
			}

			.activeBtn {
				position: fixed;
				bottom: 0;
				right: 0;
				left: 0;
				z-index: 101;
				background-color: #fff;
				padding: 30rpx 0 40rpx;

				.btn_Confirm {
					display: flex;
					justify-content: space-between;
					background-color: #f5f7fa;
					margin: 0rpx 30rpx;
					border-radius: 50rpx;

					.show_Confirm {
						font-size: 28rpx;
						display: flex;
						padding: 18rpx;

						.details {
							transform: scale(0.8);
							color: #007cff;
						}
					}

					.btn {
						background-color: #007cff;
						padding: 18rpx;
						border-radius: 0 50rpx 50rpx 0;

						.text {
							color: #fff;
							font-size: 28rpx;
						}
					}
				}
			}
		}

		.goodspopup {
			height: 1100rpx;
			background-color: #f6f7fa;
			position: relative;
			z-index: 2;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 24rpx 0;
				font-weight: bold;
				background-color: #fff;

				.icon {
					position: absolute;
					right: 30rpx;
					font-weight: 500;
				}
			}

			.goods_list {
				margin: 0 24rpx;
				width: calc(100% - 48rpx);
				overflow-y: auto;
				height: 90vh;

				&::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				}

				.goods_item_bo {
					background-color: #fff;
					margin: 24rpx 0;
					border-radius: 10rpx;
					padding: 24rpx;

					.over_Insured {
						text-align: right;
						font-size: 24rpx;
						position: relative;
						top: 0;
						right: -12rpx;

						.tag {
							background-color: #007cff;
							color: #fff;
							font-size: 22rpx;
							padding: 2rpx 4rpx;
							border-radius: 4rpx;
							margin-right: 6rpx;

							&.tag_p {
								background-color: #ccc;
								color: #eee;
							}
						}
					}

					&:last-child {
						margin-bottom: 40vh;
					}

					.goods_item_info {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.item_title_status1 {
							position: absolute;
							top: 24rpx;
							right: 24rpx;
							font-size: 24rpx;
							background-color: #007cff;
							color: #fff;
							padding: 4rpx;
						}

						.item_title_status1 {
							position: absolute;
							top: 24rpx;
							right: 24rpx;
							font-size: 24rpx;
							background-color: #999;
							color: #fff;
							padding: 4rpx;
						}

						.goods_item_left {
							display: flex;
							// align-items: center;

							.item_img {
								width: 140rpx;
								height: 140rpx;
								background-color: #fff;
								border-radius: 4rpx;
								border: 1px solid #eee;
							}

							._img {
								width: 140rpx;
								height: 140rpx;
								border-radius: 4rpx;
							}

							.item_title {
								font-size: 24rpx;
								margin-left: 20rpx;
								flex: 1;
								display: flex;
								flex-direction: column;
								row-gap: 10rpx;

								.item_title_name {
									font-weight: bold;
									font-size: 28rpx;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}

								.item_title_brand {
									font-size: 28rpx;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}

								.item_title_text {
									font-size: 24rpx;
									color: #777;
									display: flex;
									flex-wrap: wrap;

									.item_title_color {
										color: #000;
										flex: 1;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										overflow: hidden;
										word-wrap: break-word;
										word-break: break-all;
									}
								}

								.item_title_code {
									font-size: 24rpx;
									color: #999;
									display: flex;
									flex-wrap: wrap;

									.item_title_color {
										color: #000;
										flex: 1;
										display: -webkit-box;
										-webkit-line-clamp: 2;
										-webkit-box-orient: vertical;
										overflow: hidden;
										word-wrap: break-word;
										word-break: break-all;
									}
								}
							}
						}

					}
				}

				.goods_item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					background-color: #fff;
					margin: 24rpx 0;
					border-radius: 10rpx;
					padding: 24rpx;

					&:last-child {
						margin-bottom: 40vh;
					}

					position: relative;

					.item_title_status1 {
						position: absolute;
						top: 24rpx;
						right: 24rpx;
						font-size: 24rpx;
						background-color: #007cff;
						color: #fff;
						padding: 4rpx;
					}

					.item_title_status1 {
						position: absolute;
						top: 24rpx;
						right: 24rpx;
						font-size: 24rpx;
						background-color: #999;
						color: #fff;
						padding: 4rpx;
					}

					.goods_item_left {
						display: flex;
						// align-items: center;

						.item_img {
							width: 140rpx;
							height: 140rpx;
							background-color: #fff;
							border-radius: 4rpx;
							border: 1px solid #eee;
						}

						._img {
							width: 140rpx;
							height: 140rpx;
							border-radius: 4rpx;
						}

						.item_title {
							font-size: 24rpx;
							margin-left: 24rpx;
							flex: 1;

							.item_title_name {
								margin-bottom: 10rpx;
								font-weight: bold;
								font-size: 28rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;
							}

							.item_title_brand {
								font-size: 28rpx;
								margin-bottom: 10rpx;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								overflow: hidden;
								word-wrap: break-word;
								word-break: break-all;

								.dot {
									font-weight: bold;
									padding: 0 10rpx;
								}
							}

							.item_title_text {
								font-size: 24rpx;
								color: #777;
								margin-bottom: 10rpx;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}

							.item_title_code {
								font-size: 24rpx;
								color: #777;
								display: flex;
								flex-wrap: wrap;

								.item_title_color {
									color: #000;
									flex: 1;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									overflow: hidden;
									word-wrap: break-word;
									word-break: break-all;
								}
							}
						}
					}

				}

				.void_goods {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					width: 100%;
					height: 60vh;

					.img {
						width: 60%;
						height: 250rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;
					}
				}
			}
		}
	}
</style>